var htmlWebPack = require('html-webpack-plugin');

module.exports = {
    // 1.js指定打包入口
    entry: './src/main.js',
    // 2.js指定打包文件存放处
    output: {
        // 2.1 文件路径: 注意,webpack 1.14.0 此处需要写绝对路径, 但是可以不写死,动态获取绝对路径即可
        path: __dirname + '/dist',
        // 2.2 文件名
        filename: 'build.js',
    },

    // 3. css 打包
    module: {
        // 也可以用rules: [] 代替loaders[]
        loaders: [
            {
                test: /\.css$/, // 正则表示:所有.css结尾的文件被此loader处理 ,注意别加引号''
                // 注意顺序跟格式: 如果写成style!css-loader or css-loader!style-loader都会报错
                loader: 'style-loader!css-loader',

                /* 其它写法
                * loader: ['style-loader', 'css-loader'],
                * loaders: ['style-loader', 'css-loader'],
                * */
            },
            {
                test: /\.scss$/,
                loader: 'style-loader!css-loader!sass-loader',
            },
            {
                test: /\.less$/,
                loader: 'style-loader!css-loader!less-loader',
            },
            {
                test: /\.(png|jpg|gif|ttf)$/,
                // 限制url文件的大小在20kb以内,将它转成base64的data,超过会造成build.js文件过大
                // 超过20k的文件会被拉到目录旁边并且重命名
                loader: 'url-loader?limit=20000',
            },
            {
                // 操你妈的,babel-loader 此处新版本会报错,注意版本调整成@6.4.1
                test: /\.(jsx|js)$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }

        ],
    },

    babel: {
        presets: ['es2015'],
        plugins: ['transform-runtime'],
    },
    // 4.plugins
    plugins: [
        new htmlWebPack({
            title: 'yf首页', // 首页title
            filename: 'index.html', // webpack-dev-server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
            template: 'templateindex.html', // 根据index.html这个模板来生成(这个文件请程序员自己生成)
        })
    ]
}